<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <my-component v-on:my-event="doSomething"></my-component>

    <base-input v-on:focus.native="onFocus"></base-input>
    <label>
        {{ label }}
        <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
    </label>

    <text-document v-bind:title="doc.title" 
    v-on:update:title="doc.title = $event">
    </text-document>

    <text-document v-bind:title.sync="doc.title">
    </text-document>

    <text-document v-bind.sync="doc"></text-document>


    
    <script>
        Vue.component('base-checkbox', {
            model: {
                prop: 'checked',
                event: 'change'
            },
            props: {
                checked: Boolean
            },
            template: `
        <input
        type="checkbox"
        v-bind:checked="checked"
        v-on:change="$emit('change', $event.target.checked)"
        >`
        })
        Vue.component('base-input', {
            inheritAttrs: false,
            props: ['label', 'value'],
            computed: {
                inputListeners: function () {
                    var vm = this
                    // `Object.assign` merges objects together to form a new object
                    return Object.assign({},
                        // We add all the listeners from the parent
                        this.$listeners,
                        // Then we can add custom listeners or override the
                        // behavior of some listeners.
                        {
                            // This ensures that the component works with v-model
                            input: function (event) {
                                vm.$emit('input', event.target.value)
                            }
                        }
                    )
                }
            },
            template: `
                <label>
                {{ label }}
                <input
                    v-bind="$attrs"
                    v-bind:value="value"
                    v-on="inputListeners"
                >
                </label>`
        })

        this.$emit('update:title', newTitle)


    </script>
</body>

</html>